<template>
    <div class="fromEdit"  v-loading="pageLoading" >
        <div class="addbtn">
            <el-button type="primary" @click="addFrom"><Icon type="md-add" />新增表格配置</el-button>
            <el-button type="primary" @click="commitFrom"> 提 交 </el-button>
            <el-button type="" @click="$parent.showList" > 返 回 </el-button>
        </div>
        <div>
            <el-collapse v-model="activeNames">
                <el-collapse-item v-for="(item,index) in fromList" :key="index+1" :title="'第('+(index+1)+')条'" :name="index+1">
                    <div style="width:20%;">
                        <label for="">表单标识：</label>
                        <el-select @change="getName(item.place,item)" v-model="item.place" placeholder="请选择">
                            <el-option
                            v-for="citem in options"
                            :key="citem.place"
                            :label="citem.name"
                            :value="citem.place">
                            </el-option>
                        </el-select>
                    </div>
                    <div style="flex:1;">
                        <label>SQL查询语句：</label>
                        <el-input v-model="item.selectSql" clearable placeholder="请输入内容"></el-input>
                    </div>
                    <div style="padding-left: 20px;width: 10%;">
                        <el-popconfirm :title="'确定删除第'+(index+1)+'条数据吗？'" icon-color="#f00" @confirm="deleteRowData(index)">
                            <el-button slot="reference" type="danger" size="mini" ><i style="font-size: 16px;" class="el-icon-delete"></i></el-button>
                        </el-popconfirm>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script>
  import request from '@/utils/request'
  import { frompage } from '@/api/home_/adminCenter'
export default{
    props:{
        getSelectObj:{
            type:Object,
            default:()=>{
                return{}
            },
            require:true
        }
    },
    data(){
        return {   
            options:[], 
            pageLoading:false,
            label1:true,
            label2:false,
            fromList:[],
            obj:{
                name:"",
            },
            activeNames:''
        }
    },
    mounted(){
        frompage({
          'pgIndex': 1,
          'pgSize':1000
        }).then(res => {
          this.options = res.data.records
        })
        this.$nextTick(res=>{
            let parObj = JSON.parse(this.getSelectObj)
            if(parObj.dataConfig){
                this.fromList = JSON.parse(parObj.dataConfig)||[]
            }else{
                this.fromList = []
            }
            if(this.fromList.length!=0){
                this.activeNames = []
                this.fromList.forEach((item,index)=>{
                    this.activeNames.push(index+1)
                })
            }
        })
    },   
    methods:{
        getName(v,obj){
            this.options.forEach((item,index)=>{
                if(item.place == v){
                    obj['name'] = item.name
                }
            })
        },
        commitFrom(){
            let count = -1;
            for(let i=0;i<this.fromList.length;i++){
                let item = this.fromList[i]
                if(!item.selectSql||!item.place){
                    count = i
                    break
                }
            }
            if(count!=-1){
                this.$message.error(`请把第${count+1}条数据填写完整`)
                return 
            }else{
                this.commitjk()
            }
        },
        commitjk(){
            let p ={
                "dataConfig": JSON.stringify(this.fromList),
                "id":JSON.parse(this.getSelectObj).id
            }
            this.pageLoading = true
       
            request({
                    url: '/ht-bpmn/ht-bpmn/complete/saveOrUpdate',
                    method: 'post',
                    data:p
                }).then(res => {
                    this.pageLoading = false
                    if (res.code == 200) {
                        this.$parent.showList('true')
                        this.fromList = []
                        this.$message.success(res.msg)
                    } else {
                        this.$message.error(res.msg)
                    }
                })
        },
        deleteRowData(index){
            const a = JSON.parse(JSON.stringify(this.fromList))
            a.splice(index, 1)
            this.fromList = JSON.parse(JSON.stringify(a))
        },
   
        addFrom(){
            this.fromList.push({...this.obj})
            this.activeNames = this.fromList.length
        },
        deleteOutFrom(){

        },
        deleteInnerFrom(){

        }
    }
}
</script>

<style lang="scss" scoped>
.fromEdit{
    position: relative;
    .addbtn{
        // position: fixed;
        background: #fff;
        width: 100%;
        z-index: 999;
        padding:0 0 10px 0;
    }
}
.parDel{
    color: red;
    line-height: 32px;
    margin-left: 10px;
    font-size: 18px;
    cursor: pointer;
}
>>>.el-collapse-item__wrap{
    padding-top: 20px;
}
>>>.el-collapse-item__header{
    background: #f2f5f8;
    padding-left: 10px;
}
>>>label.el-radio {
    width: 45px !important;
    display: inline-block;
    margin-right: 10px;
}
.requestBodyClass{
    .requestBodyContent{
        >div{
            display: flex;
            flex-direction: row;
            margin-bottom: 10px;
            p{
                display: flex;
                flex-direction: row;
                width: 20%;
            }
        }
    }
}
>>>.el-collapse-item__content {
    padding-bottom: 25px;
    font-size: 13px;
    color: #303133;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    >div{
        display: flex;
        flex-direction: row;
        margin-bottom: 10px;
        label{
            display: inline-block;
            width: 130px;
            text-align: right;
            line-height: 32px;
            font-size: 12px;
            font-weight: normal;
        }
    }
}
</style>